<template>
    <div class="album-list-box" v-show="tracks.length !== 0">
        <div class="base">
            <div class="left-box">
                <div class="album-box">
                    <n-image width="200" class="shadow-2xl"
                             :src="blurPicUrl"></n-image>
                    <div class="alum-info">
                        <div class="ai-top">
                            <p class="album-tag">专辑</p>
                            <p class="album-name">{{ albumName }}</p>
                        </div>
                        <div class="ai-content">
                            <div>
                                <span>歌手: </span>
                                <span class="text-blue-500 hover:underline cursor-pointer"
                                      @click="getRouterToArtistInfo(arId)">{{ arName }}</span>
                            </div>
                            <div>
                                <span>发行日期: </span>
                                <span>{{ publishTime }}</span>
                            </div>
                            <div>
                                <span>发行公司: </span>
                                <span>{{ company }}</span>
                            </div>
                        </div>
                        <play-icon :list-song="tracks" :is-one="false" :comment-count="commentCount"
                                   :share-count="shareCount"></play-icon>
                    </div>
                </div>
                
                <div class="album-description">
                    <p class="text-sm font-bold">专辑介绍:</p>
                    <div class="description-content">
                        <p v-for="(item, index) in description.slice(0, descriptionLength)" :key="index" class="my-1">
                            {{ item }}</p>
                    </div>
                    <span class="ml-8 cursor-pointer hover:underline" v-show="isShowMore"
                          @click="isShowMoreDescription(true)">展开</span>
                    <span class="ml-8 cursor-pointer hover:underline" v-show="!isShowMore"
                          @click="isShowMoreDescription(false)">收起</span>
                </div>
                
                <div class="play-list-box">
                    <song-list-detail :id="route.query.id" :track-count="trackCount" :play-count="playCount"
                                      :tracks="tracks.slice(pageItemCount * (page - 1), pageItemCount * page)"
                                      :is-show-play-count="false"></song-list-detail>
                    <div class="flex items-center justify-center">
                        <n-pagination v-model:page="page" :page-count="pageCount" show-quick-jumper/>
                    </div>
                </div>
                <div class="m-16">
                    <comment-on :comment-count="commentCount" :comment-type=3 :id=route.query.id></comment-on>
                </div>
            </div>
            <div class="right-box">
                <div class="rb-t">
                    <p class="font-bold border-b pb-1 border-gray-400">Ta的其他热门专辑</p>
                    <div class="flex mt-2" v-for="(item, index) in otherHotAlbum" :key="index">
                        <div class="w-12">
                            <n-image :src="item.picUrl" object-fit="contain"></n-image>
                        </div>
                        <div class="ml-2">
                            <p class="text-base cursor-pointer hover:underline" :title="item.name"
                               @click="getRouterToAlbumList(item.id)">{{ calString(item.name, 10) }}</p>
                            <div class="flex text-gray-400">
                                <p>by</p>
                                <p class="ml-2 cursor-pointer hover:underline" :title="item.artist.name">
                                    {{ calString(item.artist.name, 10) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage, NPagination, useNotification} from 'naive-ui';
import PlayIcon from "@/components/PlayIcon";
import {onMounted, reactive, toRefs} from "vue";
import SongListDetail from "@/components/song/SongListDetail";
import {useRoute, useRouter} from "vue-router";
import {getAlbumDynamicDetail, getAlbumList, getArtistAlbum} from "@/network/song/album-list";
import CommentOn from "@/components/comment/CommentOn";
import {calString} from "@/util/cal"
import {useStore} from "vuex";

export default {
    // 专辑详情页面
    name: "AlbumList",
    setup() {
        const TAG = "AlbumList.vue";
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const albumList = reactive({
            blurPicUrl: '',
            albumName: '',
            arName: '',
            arId: '',
            publishTime: '',
            company: '',
            tracks: [],
            commentCount: 0,
            shareCount: 0,
            description: [],
            trackCount: 0,
            playCount: 0,
            isSub: false,
            subCount: 0,
            otherHotAlbum: [],
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        const Setting = reactive({
            descriptionLength: 15,
            isShowMore: true,
            page: 1,
            pageCount: 1,
            pageItemCount: 10
        })
        const init = () => {
            getAlbumList(route.query.id).then(res => {
                console.log(res.data);
                albumList.blurPicUrl = res.data.album.blurPicUrl;
                albumList.albumName = res.data.album.name;
                albumList.tracks = res.data.songs;
                albumList.arName = res.data.album.artist.name;
                albumList.publishTime = new Date(parseInt(res.data.album.publishTime)).toLocaleString().replace(/:\d{1,2}$/, ' ');
                albumList.company = res.data.album.company;
                albumList.description = res.data.album.description.split('\n');
                albumList.trackCount = res.data.album.size;
                albumList.commentCount = res.data.album.info.commentCount;
                albumList.shareCount = res.data.album.info.shareCount;
                albumList.arId = res.data.album.artist.id;
                
                getArtistAlbum(albumList.arId, 5).then(res => {
                    albumList.otherHotAlbum = res.data.hotAlbums;
                })
                // 小于1会直接被处理为1
                let pages = albumList.tracks.length / Setting.pageItemCount;
                if (Number.isInteger(pages)) {
                    Setting.pageCount = pages;
                } else {
                    // 这里会被直接舍弃小数
                    Setting.pageCount = parseInt(pages);
                    Setting.pageCount++;
                }
            })
        }
        // 展开和收起按钮事件
        const isShowMoreDescription = (flag) => {
            if (flag) {
                Setting.descriptionLength = albumList.description.length;
                Setting.isShowMore = false;
            } else {
                Setting.descriptionLength = 15;
                Setting.isShowMore = true;
            }
        }
        
        onMounted(() => {
            beLoading();
            init();
        })
        // 通知组件
        const notification = useNotification();
        // 根据ＩＤ获取专辑详情
        const getRouterToAlbumList = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/album', query: {id}});
            }
        }
        // 跳转到歌手详情页面
        const getRouterToArtistInfo = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/artist', query: {id}});
            }
        }
        return {
            ...toRefs(albumList),
            ...toRefs(Setting),
            route,
            isShowMoreDescription,
            calString,
            getRouterToAlbumList,
            getRouterToArtistInfo
        }
    },
    components: {
        NImage,
        PlayIcon,
        SongListDetail,
        CommentOn,
        NPagination,
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.album-list-box {
    width: $client-width;
    background: #f4f4f4;
    min-height: $client-height;
    
    .left-box {
        @apply w-4/5 border bg-white;
        .album-box {
            @apply flex mx-16 mt-16 mb-4;
            .alum-info {
                @apply mx-8;
                .ai-top {
                    @apply flex mb-4;
                    .album-tag {
                        @apply p-1 text-white font-light text-sm rounded-md;
                        background: #d61c1c;
                    }
                    
                    .album-name {
                        @apply mx-4 text-xl;
                    }
                }
                
                .ai-content {
                    @apply my-4;
                    color: #999999;
                }
            }
        }
        
        .album-description {
            @apply mx-16;
            .description-content {
                text-indent: 2em;
                color: #666666;
            }
        }
        
        .play-list-box {
            @apply mx-16;
        }
        
    }
    
    .right-box {
        @apply w-1/5 border bg-white;
        .rb-t {
            @apply m-4 p-2;
        }
    }
}
</style>